<template>
  <div>
    <el-row type="flex" class="row-bg" justify="space-between">
      <el-col :span="6" class="pointer" @click.native="chooseMap">
        <img
          src="../../assets/logo2.png"
          width="52"
          height="38"
          class="mt15 mr15 fl"
        />
        <div class="fl logo">社区日志服务平台</div>
      </el-col>

      <el-col :span="16" class="text-center">
        <!-- <div class="fl"> -->
        <el-menu
          :default-active="activeIndex2"
          class="mt10 text-center"
          mode="horizontal"
          background-color="#083749"
          text-color="#fff"
          active-text-color="#27CEBF"
        >
          <el-submenu
            v-for="(item, index) in menuList"
            :index="index + ''"
            :key="index"
            popper-class="pc"
          >
            <template slot="title">
              <i style="color: #28b47c" :class="item.icon"></i>
              {{ item.name }}
            </template>
            <el-menu-item
              v-for="(item1, index1) in item.list"
              :key="index1"
              :index="index + '_' + index1"
              @click.native="chooseMenu(item1)"
              >{{ item1.name }}</el-menu-item
            >
          </el-submenu>

          <el-menu-item index="400" @click.native="chooseMap()">
            <i style="color: #28b47c" class="el-icon-map-location"></i>
            沈阳地图
          </el-menu-item>
        </el-menu>
        <!-- </div> -->
      </el-col>

      <el-col :span="2">
        <div class="fr out mr5 pointer ml5" @click="logout">
          <i class="el-icon-switch-button"></i>
          退出
        </div>
        <div class="fr out" style="line-height: 22px">
          {{ userInfo.name }}
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "header1",

  data() {
    return {
      activeIndex2: "0",

      pc: {
        color: "red",
      },
    };
  },

  props: {},

  components: {},

  computed: {
    ...mapGetters(["menuList", "userInfo"]),
  },

  methods: {
    chooseMenu(item) {
      console.log(item);
      this.$router.push({
        name: item.href,
      });
    },

    chooseMap() {
      this.$router.push({
        name: "dashboard",
      });
    },

    logout() {
      const para = {
        fun: "logout",
        cb: (res) => {
          this.$router.push({
            name: "login",
          });
        },
      };
      this.$http(para);
    },
  },

  watch: {
    $route: function (to, from) {
      console.log(to);
      console.log(from);
    },
  },

  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    console.log("1111");
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
    console.log("2222");
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    console.log("3333");
  },

  mounted() {},
};
</script>

<style scoped>
.logo {
  width: 230px;
  height: 70px;
  color: #fff;
  font-size: 24px;
  margin-top: 18px;
}

.out {
  padding-top: 28px;
  margin-right: 0px;
  font-size: 16px;
  font-weight: 400;
  color: rgba(253, 253, 253, 1);
}

.out1 {
  margin-top: 25px;
  margin-right: 10px;
  font-size: 18px;
  font-weight: 400;
  color: rgba(253, 253, 253, 1);
}

.pc {
  color: red;
}
</style>
